<template>
  <div>
    <!-- 卡片视图区 -->
    <el-card class="box-card">
      <!-- 面包屑导航区 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>留言管理</el-breadcrumb-item>
        <el-breadcrumb-item>新闻稿编辑</el-breadcrumb-item>
      </el-breadcrumb>

      <el-row :span=20>
        <el-col :span="8">
          <quill-editor 
            class="title"
            v-model="journalism.title"
            ref="title" 
            :options="titleOption">
          </quill-editor>
        </el-col>

        <el-col :span="8">
          <div class="demo-input-suffix">
            图片链接 : 
            <el-input
              class="iconURL"
              v-model="journalism.icon">
            </el-input>
          </div>
        </el-col>

        <el-col :span="4">
          <quill-editor 
            class="author"
            v-model="journalism.author" 
            ref="author" 
            :options="authorOption">
          </quill-editor>
        </el-col>

        <el-col :span="4">
          <el-date-picker
            class="date"
            v-model="journalism.time"
            type="datetime"
            placeholder="选择日期">
          </el-date-picker>
        </el-col>
      </el-row>

      <quill-editor 
        class="article"
        v-model="journalism.article" 
        ref="articleEditor" 
        :options="articleOption">
      </quill-editor>
      <el-button type="primary" @click="addJournalism">发布</el-button>
    </el-card>
  </div>
</template>

<script>
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';

export default {
  components: {
    quillEditor
  },
  data() {
    return {
      // 标题输入设置
      titleOption: {
        placeholder: "请在这里输入标题",
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike']
          ]
        }
      },
      // 图片设置
      iconOption: {
        placeholder: '请在这里插入图片',
        modules: {
          toolbar: [
            ['image']
          ]
        }
      },
      // 作者输入设置
      authorOption: {
        placeholder: "请在这里输入作者",
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike']
          ]
        }
      },
      // 内容输入设置
      articleOption: {
        placeholder: "请在这里输入文章内容"
      },
      journalism: {
        title: '',
        author: '',
        article: '',
        icon: '',
        remark: '',
        time: (new Date()).valueOf()
      }
    }
  },
  methods: {
    // 正则表达式，删除自动添加的标签
    // 问题：文字的样式也可能会被删除
    delHtmlTag(str) {
      return str.replace(/<[^>]+>/g,"");
    },
    async addJournalism() {
      this.journalism.title = this.delHtmlTag(this.journalism.title)
      this.journalism.author = this.delHtmlTag(this.journalism.author)
      const { data: res } = await this.$http.post('insertJournalism', this.journalism)
      if (res != 'success') return this.$message.error('添加新闻稿失败')
      this.$message.success('添加新闻稿成功')
      this.$router.push('/journalism')
    },
    print() {
      console.log(this.journalism.title)
    }
  }
}
</script>

<style scoped>
.quill-editor {
  margin-bottom: 20px;
}

.author, .title, .icon {
  margin-right: 20px;
}

.article {
  height: 500px;
}

.date {
  margin-top: 20px;
}

.el-button {
  display: block;
  margin: 65px 50% 0px 50%;
}

.demo-input-suffix {
  margin-top: 12px;
  margin-right: 20px;
}

.iconURL {
  margin-top: 10px;
}
</style>